<template>
    <div class="task">
        <div class="task-header">
            <div class="task-header-border"></div>
            <div class="task-header-title">
                <i class="task-header-title-icon el-icon-s-grid"></i>
                <h2 class="task-header-title-name">待办事项</h2>
            </div>
            <div class="task-header-actions">
                <el-input v-model="listQuery.taskName" placeholder="任务名称" style="width: 200px;margin-left: 20px;" class="filter-item" @keyup.enter.native="btnQuery" />
                <el-tooltip class="item" effect="dark" content="刷新" placement="right">
                    <i class="task-header-actions-icon el-icon-refresh" @click="refreshClick" :class="[pendLoading == true?'refreshRe':'']"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="上移" placement="right">
                    <i class="el-icon-top upwardTitle" v-if="itemIndex != 0" @click="upClick"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="下移" placement="right">
                    <i class="el-icon-bottom upwardTitle" v-if="itemIndex != 2" @click="downClick"></i>
                </el-tooltip>
            </div>
        </div>
        <div v-loading="pendLoading">
            <div class="task-content">
                <el-tabs v-model="activeName" @tab-click="tabClick">
                    <el-tab-pane label="待办" name="00"></el-tab-pane>
                    <el-tab-pane label="已办" name="01"></el-tab-pane>
                    <el-tab-pane label="抄送我" name="02"></el-tab-pane>
                </el-tabs>
            </div>
            <div class="task-content">
                <el-table :data="records" ref="multipleTable" @selection-change="selectionChange" fit highlight-current-row style="width: 100%;margin-bottom: 10px" height="232">
                    <el-table-column type="selection" align="center">
                    </el-table-column>
                    <el-table-column label="流程名称" show-overflow-tooltip prop="processInstanceName" align="center">
                        <template slot-scope="scope"><span>{{ scope.row.processInstanceName }}</span></template>
                    </el-table-column>
                    <el-table-column label="任务名称" prop="name" show-overflow-tooltip align="center">
                        <template slot-scope="scope"><span>{{ scope.row.name }}</span></template>
                    </el-table-column>
                    <el-table-column label="开始时间" prop="claimTime" align="center" width="165px">
                        <template slot-scope="scope"><span>{{ scope.row.createTime }}</span></template>
                    </el-table-column>
                    <el-table-column label="结束时间" prop="endTime" align="center" width="165px">
                        <template slot-scope="scope"><span>{{ scope.row.endTime }}</span></template>
                    </el-table-column>
                    <el-table-column label="所有人" show-overflow-tooltip prop="owner" align="center">
                        <template slot-scope="scope"><span>{{ scope.row.owner }}</span></template>
                    </el-table-column>
                    <el-table-column label="执行人" show-overflow-tooltip prop="assignee" align="center">
                        <template slot-scope="scope"><span>{{ scope.row.assignee }}</span></template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="80">
                        <template slot-scope="{row}">
                            <el-dropdown v-if="row.processDefinitionId.substring(0,2).trim() != 'WD'&&row.processDefinitionId.substring(0,2).trim() != 'HT'&&row.processDefinitionId.substring(0,2).trim() !='CP'&&row.processDefinitionId.substring(0,2).trim() !='XM'">
                                <i class="el-icon-more dropdown-more-icon"></i>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item icon="el-icon-view" @click.native="btnViewTask(row)">查看</el-dropdown-item>
                                    <el-dropdown-item icon="el-icon-view" divided @click.native="btnView(row.processInstanceId)">查看详情
                                    </el-dropdown-item>
                                    <el-dropdown-item v-permission="'flowable:task:execute'" v-if="row.endTime==null&&(row.assignee==null||row.assignee=='')" icon="el-icon-edit" divided @click.native="btnClaim(row)">认领并执行
                                    </el-dropdown-item>
                                    <el-dropdown-item v-permission="'flowable:task:execute'" v-if="row.endTime==null&&row.assignee===$store.getters.sysUser.userId" icon="el-icon-edit" divided @click.native="btnUnclaim(row)">取消认领
                                    </el-dropdown-item>
                                    <el-dropdown-item v-if="row.endTime==null&&row.assignee!=null&&row.assignee===$store.getters.sysUser.userId" icon="el-icon-edit" divided @click.native="btnExcuteTask(row)">执行
                                    </el-dropdown-item>
                                    <!-- TODO 回收任务 -->
                                </el-dropdown-menu>
                            </el-dropdown>
                            <span style="font-size: 12px;cursor: pointer;" v-if="row.processDefinitionId.substring(0,2).trim() == 'HT'||row.processDefinitionId.substring(0,2).trim() == 'WD'||row.processDefinitionId.substring(0,2).trim() =='CP'||row.processDefinitionId.substring(0,2).trim() =='XM'||row.processDefinitionId.substring(0,2).trim() == 'WD'" @click="matterdocDetails(row)">详情</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="display: flex;justify-content: center;flex-direction: row;">
                    <pagination :autoScroll="false" v-show="total>0" :pagerCounts="pagerCounts" :total="total" :current.sync="listQuery.current" :size.sync="listQuery.size" @pagination="list" />
                </div>
                <!-- 弹窗任务信息 -->
                <task-detail v-if="dialogTaskDetailVisible" :visible.sync="dialogTaskDetailVisible" :dicts="dicts" :taskDetailData="taskDetailData"></task-detail>
                <!-- 执行任务 -->
                <execute-task v-if="dialogExcuteTaskVisible" :visible.sync="dialogExcuteTaskVisible" :executeTaskId="executeTaskId" @executeTaskFinished="list"></execute-task>
                <process-detail v-if="dialogViewVisible" :visible.sync="dialogViewVisible" :processInstanceId="processInstanceId"></process-detail>
            </div>
        </div>
    </div>
</template>

<script>
import { deleteAction, getAction, postAction, putAction } from "@/api/manage";
import Pagination from "@/components/Pagination";
import TaskDetail from "../../flowable/components/TaskDetail.vue";
import ExecuteTask from "../../flowable/components/ExecuteTask";
import ProcessDetail from "../../flowable/components/ProcessDetail";
import { Message } from "element-ui";
export default {
    name: "myProject",
    data() {
        return {
            loading: false,
            refresh: false,
            records: null,
            total: 0,
            listQuery: {
                current: 1,
                size: 10,
                processInstanceId: undefined,
                taskId: undefined,
                taskName: undefined,
                processInstanceBusinessKey: undefined,
                taskDescription: undefined,
                taskAssignee: undefined,
                taskOwner: undefined,
                taskInvolvedUser: undefined,
                finished: false,
                unfinished: false,
                processFinished: false,
                processUnfinished: false,
                suspended: false,
                active: false,
                taskParentTaskId: undefined,
                taskDueBefore: undefined,
                taskDueAfter: undefined,
                taskCreatedBefore: undefined,
                taskCreatedAfter: undefined,
                taskCompletedBefore: undefined,
                taskCompletedAfter: undefined,
                taskCandidateUser: undefined,
                taskCandidateGroupIn: undefined,
            },
            dialogTaskDetailVisible: false,
            dialogExcuteTaskVisible: false,
            dialogTaskBackNodesVisible: false,
            dicts: [],
            taskDetailData: {
                id: "",
                name: "",
                description: "",
                category: "",
                owner: "",
                assignee: "",
                claimTime: "",
                dueDate: "",
                endTime: "",
                durationInMillis: "",
                workTimeInMillis: "",
                priority: "",
                taskDefinitionKey: "",
                processInstanceId: "",
                processInstanceName: "",
                processDefinitionId: "",
                processDefinitionName: "",
                processDefinitionDescription: "",
                processDefinitionKey: "",
                processDefinitionCategory: "",
                processDefinitionVersion: "",
                processDefinitionDeploymentId: "",
                formKey: "",
                renderedTaskForm: "",
                processInstanceStartUserId: "",
                initiatorCanCompleteTask: "",
                memberOfCandidateGroup: "",
                memberOfCandidateUsers: "",
                delegationState: "",
                suspended: "",
                involvedPeople: "",
                ownerName: "",
                assigneeName: "",
                tenantId: "",
            },
            executeTaskId: "",
            processInstanceId: "",
            dialogViewVisible: false,
            pendLoading: false,
            activeName: "00",
            pagerCounts: 3,
        };
    },
    components: { Pagination, TaskDetail, ExecuteTask, ProcessDetail },
    props: ["itemIndex"],
    created() {
        // 接下来的使用就跟之前一样，初始化图表，设置配置项
        this.list();
    },
    methods: {
        //    list() {
        //         getAction('/flowable/processInstance/listMyInvolvedSummary', this.listQuery).then(res => {
        //             const {data} = res
        //             this.myInvolvedRecords = data;
        //         })
        //     },
        refreshClick() {
            var _this = this;
            // this.loading = true
            // this.refresh = true
            console.log("进来了");
            _this.listQuery.current = 1;
            _this.listQuery.size = 10;
            _this.list();
            // setTimeout(function() {
            // 	_this.loading = false
            // 	_this.refresh = false
            // }, 2000)
        },
        currentChange(data) {
            var _this = this;
            this.loading = true;
            setTimeout(function () {
                _this.loading = false;
            }, 2000);
        },
        projectClick() {
            this.$router.push({
                path: "/project/details",
            });
        },

        list() {
            var _this = this;
            if (_this.activeName == "00") {
                _this.pendLoading = true;
                getAction("/flowable/task/listTodo", this.listQuery, false)
                    .then((res) => {
                        const { data } = res;
                        this.records = data.records;
                        this.total = data.total;
                        this.$emit('dealttotalshow',data.total)
                        _this.pendLoading = false;
                    })
                    .catch((error) => {
                        _this.pendLoading = false;
                    });
            } else if (_this.activeName == "01") {
                _this.pendLoading = true;
                getAction("/flowable/task/listDone", this.listQuery, false)
                    .then((res) => {
                        const { data } = res;
                        this.records = data.records;
                        this.total = data.total;
                        _this.pendLoading = false;
                    })
                    .catch((error) => {
                        _this.pendLoading = false;
                    });
            } else if (_this.activeName == "02") {
                getAction("/flowable/processInstance/listMyInvolved", {
                    startedByMe: false,
                    ccToMe: true,
                    unfinished: false,
                    finished: false,
                }).then((res) => {
                    const { data } = res;
                    this.records = data.records;
                     this.total = data.total;
                    // this.myInvolvedRecords = data;
                });
            }
        },
        selectionChange(selectedRecords) {
            this.selectedRecords = selectedRecords;
        },
        btnQuery() {
            this.listQuery.current = 1;
            this.list();
        },
        btnViewTask(row) {
            getAction("/flowable/task/queryById", { taskId: row.id }).then(
                (res) => {
                    const { data } = res;
                    this.taskDetailData = Object.assign({}, data);
                    this.dialogTaskDetailVisible = true;
                }
            );
        },
        btnView(processInstanceId) {
            this.processInstanceId = processInstanceId;
            this.dialogViewVisible = true;
        },
        btnClaim(row) {
            putAction("/flowable/task/claim", { taskId: row.id })
                .then(({ msg }) => {
                    this.list();
                    this.btnExcuteTask(row);
                })
                .catch((response) => {
                    this.list();
                });
        },
        btnUnclaim(row) {
            putAction("/flowable/task/unclaim", { taskId: row.id }).then(
                ({ msg }) => {
                    Message.success(msg);
                    this.list();
                }
            );
        },
        btnExcuteTask(row) {
            this.executeTaskId = row.id;
            this.dialogExcuteTaskVisible = true;
        },
        matterdocDetails(row) {
            if (this.activeName == "02") {
                this.listMyInvolvedDetails(row);
            } else {
                this.docDetails(row);
            }
        },
        listMyInvolvedDetails(row) {
            var _this = this;
            let transId = row.businessKey.substring(
                row.businessKey.indexOf(":") + 1,
                row.businessKey.legth
            );
            if (
                row.processDefinitionId.substring(0, 2).trim() == "HT" ||
                row.processDefinitionId.substring(0, 2).trim() == "WD"
            ) {
                var data = {
                    // executeTaskId: row.id,
                    docId: transId,
                    type: "ccToMe",
                    processInstanceId: row.id,
                    // endTime:row.endTime,
                    // assignee:row.assignee
                };
                this.$router.push({
                    path: "/document/details",
                    query: {
                        data: JSON.stringify(data),
                    },
                });
            } else if (row.processDefinitionId.substring(0, 2).trim() == "CP") {
                var data = {
                    verId: transId,
                    // releaseId: row.id,
                    processInstanceId: row.id,
                    type: "ccToMe",
                    // endTime:row.endTime,
                    // assignee:row.assignee
                };
                this.$router.push({
                    path: "/produce/releasedetails",
                    query: {
                        data: JSON.stringify(data),
                    },
                });
            } else if (row.processDefinitionId.substring(0, 2).trim() == "XM") {
                var data = {
                    transId,
                    id: row.id,
                    type: "ccToMe",
                };
                this.$router.push({
                    path: "/project/process",
                    query: {
                        data: JSON.stringify(data),
                    },
                });
            }
        },
        docDetails(row) {
            var _this = this;
            if (
                row.processDefinitionId.substring(0, 2).trim() == "HT" ||
                row.processDefinitionId.substring(0, 2).trim() == "WD"
            ) {
                var data = {
                    executeTaskId: row.id,
                    processInstanceId: row.processInstanceId,
                    endTime: row.endTime,
                    assignee: row.assignee,
                };
                this.$router.push({
                    path: "/document/details",
                    query: {
                        data: JSON.stringify(data),
                    },
                });
            } else if (row.processDefinitionId.substring(0, 2).trim() == "CP") {
                var data = {
                    releaseId: row.id,
                    processInstanceId: row.processInstanceId,
                    endTime: row.endTime,
                    assignee: row.assignee,
                };
                this.$router.push({
                    path: "/produce/releasedetails",
                    query: {
                        data: JSON.stringify(data),
                    },
                });
            } else if (row.processDefinitionId.substring(0, 2).trim() == "XM") {
                console.log(row);
                var data = {
                    executeTaskId: row.id,
                    processInstanceId: row.processInstanceId,
                    endTime: row.endTime,
                    assignee: row.assignee,
                    id: row.projId,
                };
                this.$router.push({
                    path: "/project/process",
                    query: {
                        data: JSON.stringify(data),
                    },
                });
            }
        },
        tabClick(data) {
            console.log(data);
            var _this = this;
            _this.listQuery.current = 1;
            _this.listQuery.size = 10;
            if (data.index == "0") {
                _this.activeName = "00";
                _this.list();
            } else if (data.index == "1") {
                _this.activeName = "01";
                _this.list();
            } else if (data.index == "2") {
                _this.activeName = "02";
                _this.list();
            }
        },
        upClick() {
            this.$emit("upClick", this.itemIndex);
        },
        downClick() {
            this.$emit("downClick", this.itemIndex);
        },
    },
    mounted() {},
};
</script>

<style scoped>
.task {
    flex-grow: 1;
    height: 400px;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 0 0 1px #ecedf0;
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
}

.task-header {
    flex: none;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    padding: 0 24px;
    justify-content: space-between;
    padding-top: 10px;
    margin-top: 10px;
}

.task-header-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    border-top: 5px solid transparent;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    pointer-events: none;
    border-color: rgb(138, 68, 220);
}

.task-header-title {
    height: 100%;
    display: flex;
    align-items: center;
}

.task-header-title-icon {
    font-size: 16px;
    margin-right: 4px;
    color: #cce2ff;
}

.task-header-title-name {
    min-width: 0;
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #2e405e;
}

.task-header-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.task-header-actions-icon {
    border-radius: 4px;
    cursor: pointer;
    color: #909aaa;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    margin-left: 20px;
}

.task-content {
    margin: 2px 25px;
    /* display: flex;
		flex-direction: column;
		/* flex: 1; */
    /* align-items: center; */
}

.refreshRe {
    -webkit-animation: rotate 1.2s linear infinite;
    /*Safari and Chrome*/
}

@keyframes rotate {
    0% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        /* IE 9 */
        -moz-transform: rotate(360deg);
        /* Firefox */
        -o-transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -moz-transform: rotate(0deg);
        /* Firefox */
        -o-transform: rotate(0deg);
    }
}

@-webkit-keyframes rotate {
    0% {
        -moz-transform: rotate(360deg);
    }

    100% {
        -moz-transform: rotate(0deg);
    }
}

/*修改element样式*/
/deep/.el-tabs__nav-wrap::after {
    background-color: white;
}

/deep/.el-tabs__item {
    color: #909aaa;
    padding: 0 10px;
}

/deep/.el-tabs__item.is-active {
    color: #1890ff;
}
/deep/ .el-tabs__header {
    margin-bottom: 0px;
}
.upwardTitle {
    cursor: pointer;
    color: #909aaa;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    margin-left: 10px;
}
</style>
